<template>
  <div>
    <el-card>
      <div class="head">
        <div>
          <el-button class="el-icon-back back" @click="goback">返回</el-button>
          <span class="grey">|</span>
          <span class="ti">题目详情:</span>
        </div>
        <div class="stu">
          <p>状态:
            <el-tag v-if="xq[0].status==1" type="success">已发布</el-tag>
            <el-tag v-if="xq[0].status==0" type="info">待审核</el-tag>
            <el-tag v-if="xq[0].status==2" type="danger">未通过</el-tag>
          </p>
          <p v-if="xq[0].reason!='无'">理由:
            <span class="red">{{ xq[0].reason }}</span>
          </p>
        </div>

      </div>
      <div class="content">
        <div>
          <!-- <a>题目名称:</a> -->
          <el-tag type="success">题目名称:</el-tag>
          <span>{{ xq[0].title }}</span>
        </div>

        <div>
          <!-- <a>答案解析:</a> -->
          <el-tag>答案解析:</el-tag>
          <div class="answer" v-html="xq[0].answer" />
        </div>
      </div>
      <div class="ann" v-if="gl">
          <el-button type="success" icon="el-icon-success" circle @click="tong"></el-button> 
          <el-button type="danger" icon="el-icon-error" circle @click="refuse"></el-button>
      </div>
    </el-card>

    <el-dialog title="新增分类" :visible.sync="dialogFormVisible" width="30%">
      <el-form ref="ruleForm" :model="form" :rules="rules">
        <el-form-item label="驳回原因" prop="reason">
          <el-input v-model="form.reason" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      xq: [],
      gl:true,
      id:'',
      dialogFormVisible: false,
      form: {
        reason: ''
      },
      rules: {
        reason: [
          { required: true, message: '请输入驳回理由', trigger: 'blur' }
        ]
      }
    }
  },
  
  computed: {},
  watch: {},
  async created() {
    var res = await this.http.get(`/knowledge/xq/${this.$route.query.id}`)
      this.id=this.$route.query.id
      if(this.$route.query.info=='题目管理'){
          this.gl=false
      }else{
          this.gl=true
      }
      if (res.data.code == 200) {
        this.xq = res.data.data
      }

  },
  mounted() {
        chainWebpack: (config) => {
        config.plugin('provide').use(webpack.ProvidePlugin, [{
        'window.Quill': 'quill'
        }]);
        }
  },
  methods: {
    goback() {
      this.$router.go(-1)
    },
    async tong() {
      var res = await this.http.put(`/knowledge/ques/${this.id}`)
      if (res.data.code == 200) {
        this.$router.push('/shenhe')
        this.$message.success('题目通过')
      }
    },
    refuse() {
      this.dialogFormVisible = true
    },
    async save() {
      this.$refs.ruleForm.validate(async(valid) => {
        if (valid) {
          var res = await this.http.put(`/knowledge/ques/${this.id}`, this.form)
          if (res.data.code == 200) {
            this.dialogFormVisible = false
            this.$router.push('/shenhe')
            this.$message.success('驳回题目成功')
          }
        }
      })
    },
  }
}
</script>
<style  scoped>
        .head{
            height: 50px;
            padding-bottom: 22px;
            border-bottom: 1px solid #ebeef5;
        }
        .head div{
            display: inline-block;
        }
        .stu{
            float: right;
        }
        .head span{
            line-height: 38px;
            margin-left: 10px;
            font-weight: bold;
        }
        .back{
            float: left;
            height: 100%;
            padding-left: 0;
            padding-right: 0;
            background: 0;
            border: 0;
            font-size: 18px;
        }
        .grey{
            color: #d8dde3;
        }
        .ti{
            font-size: 20px;
        }
        .stu .el-tag{
            font-size: 16px;
            font-weight: bold;
        }
        .content div{
            margin-top: 20px;
            margin-bottom: 20px;
        }
        /* .content a{
            color: #58637d;
        } */
        /* .content p span{
            font-size: 16px;
            font-weight: bold;
        } */
        .red{
            color: red;
        }
        .ann{
          width: 100px;
          height: 60px;
          margin: 0 auto;
        }
        /* .ann .el-button{
          margin: 0 auto;
        } */
</style>
